import { Picker, Text, View } from 'ray';
import styles from '@/pages/home/index.module.less';
import Strings from '@/i18n';
import React from 'react';
import clsx from "clsx";

import PopupPicker from '@/components/PopupPicker'

interface IProps {
  state: {
    timerSwitch: boolean;
    startHour: number;
    startMinute: number;
    endHour: number;
    endMinute: number;
    gear: number;
    startTime: number;
    pauseTime: number;
  };
  dispatch: React.Dispatch<{ type: string; key?: string; value?: any }>;
  selectedDays: number[];
  handleWork: (
    startHour: number,
    startMinute: number,
    endHour: number,
    endMinute: number,
    selectedDays: number[],
    startTime: number,
    pauseTime: number
  ) => void;
}

// 小时
const hourArr = Array.from({ length: 24 }, (_, i) => i);
// 分钟
const minuteArr = Array.from({ length: 60 }, (_, i) => i);


export default function SectionCell({ state, dispatch, handleWork, selectedDays }: IProps) {

  const startColumns =  [
    {
      values: hourArr,
      unit: Strings.getLang('hours'),
      activeIndex: hourArr.indexOf(state.startHour)
    },
    {
      values: minuteArr,
      unit: Strings.getLang('minutes'),
      activeIndex: hourArr.indexOf(state.startMinute)
    }
  ]

  const endColumns =  [
    {
      values: hourArr,
      unit: Strings.getLang('hours'),
      activeIndex: hourArr.indexOf(state.startHour)
    },
    {
      values: minuteArr,
      unit: Strings.getLang('minutes'),
      activeIndex: hourArr.indexOf(state.startMinute)
    }
  ]


  return (
    <View className={styles.cell}>
      <View className={clsx({
        [styles.disabled]: state.timerSwitch,
      })}>
        <Text>{Strings.getLang('section')}</Text>
      </View>
      <View className={clsx(styles.levelWrap, {
              [styles.disabled]: state.timerSwitch,
            })}>
        <PopupPicker
          title={Strings.getLang('start')}
          columns={startColumns}
          onChange={(e: any) => {
            const { value } = e.detail;
            const hour = value[0]
            const minute = value[1]
            handleWork(
              Number(hour),
              Number(minute),
              state.endHour,
              state.endMinute,
              selectedDays,
              state.startTime,
              state.pauseTime
            );
            dispatch({
              type: 'SET',
              key: 'startHour',
              value: hour,
            });
            dispatch({
              type: 'SET',
              key: 'startMinute',
              value: minute,
            });
          }}
        >
          <View style={{ flexDirection: 'row', gap: 10 }}
            className={clsx({
              [styles.disabled]: state.timerSwitch,
            })}
          >
            <Text>
              {`${state.startHour.toString().padStart(2, '0')}:${state.startMinute
                .toString()
                .padStart(2, '0')}`}
            </Text>
            &nbsp;
            <Text style={{ color: '#C0C0C0' }}> {Strings.getLang('start')}</Text>
          </View>
        </PopupPicker>
        <View className={styles.dividerVertical} />
        <PopupPicker
          title={Strings.getLang('pause')}
          columns={endColumns}
          onChange={(e: any) => {
            const { value } = e.detail;
            const hour = value[0]
            const minute = value[1]
            handleWork(
              state.startHour,
              state.startMinute,
              Number(hour),
              Number(minute),
              selectedDays,
              state.startTime,
              state.pauseTime
            );
            dispatch({
              type: 'SET',
              key: 'endHour',
              value: Number(hour),
            });
            dispatch({
              type: 'SET',
              key: 'endMinute',
              value: Number(minute),
            });
          }}
        >
          <View style={{ flexDirection: 'row', gap: 12 }}
                className={clsx({
                  [styles.disabled]: state.timerSwitch,
                })}>
            <Text>
              {`${state.endHour.toString().padStart(2, '0')}:${state.endMinute
                .toString()
                .padStart(2, '0')}`}
            </Text>
            &nbsp;
            <Text style={{ color: '#C0C0C0' }}>{Strings.getLang('end')}</Text>
          </View>
        </PopupPicker>
      </View>
    </View>
  );
}
